<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>异步加载</title>
    
    <script src="../../jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../ui/om-core.js"></script>
    <script type="text/javascript" src="../../ui/om-tree.js"></script>
    <link rel="stylesheet" type="text/css" href="../../themes/default/om-all.css" />
    <link rel="stylesheet" type="text/css" href="../common/css/demo.css" />
    <!-- view_source_begin -->
    <script type="text/javascript">
        $(document).ready(function(){
            $("#mytree").omTree({
                dataSource : "../../omTree.json?method=simpleModel",
                simpleDataModel: true,
                onBeforeExpand : function(node){
                	var nodeDom = $("#"+node.nid);
                	if(nodeDom.hasClass("hasChildren")){
                		nodeDom.removeClass("hasChildren");
                		$.ajax({
                            url: '../../omTree.json?content=children',
                            method: 'POST',
                            dataType: 'json',
                            success: function(data){
                                $("#mytree").omTree("insert", data, node);
                            }
                        });
                	}
                	return true;
                }
            });
        });
    </script>
    <!-- view_source_end -->
</head>
<body>
    <!-- view_source_begin -->
	<div id="main">
        <div>
        	<ul id="mytree">
        	</ul>
        </div>
	</div>
	<!-- view_source_end --> 
	<div id="view-desc">
      <p>设置dataSource为一个请求链接，页面初始化时由omTree自动发送请求到后台取数，刷新树节点。</p>
      <p>如果在返回的数据中配置了hasChildren:true，则在展开树节点才发请求更新子节点，树节点较多时异步加载数据拥有较高的性能。
         返回的数据必须为JSON数组，具体JSON格式请参考dataSource属性。</p>
   </div>
    <script type="text/javascript" src="../common/js/themeloader.js"></script>
</body>
</html>
